window.onload=function(){
	waterfall("main","box");
	//滚动页面加载
	  //模拟返回的JSON数据
	  var dataInt={"data":[{"src":"img (1).jpg"},{"src":"img (2).jpg"},{"src":"img (3).jpg"},
	                       {"src":"img (4).jpg"},{"src":"img (5).jpg"},{"src":"img (6).jpg"}]};
	window.onscroll=function(){
		
		//判断是否满足加载条件
		if(checkScrollSlide){
			var oParent=document.getElementById("main");
			//将JSON数据块渲染到当前页面	
			for(var i=0;i<dataInt.data.length;i++){
				var oBox=document.createElement("div");
				oBox.className="box";
				oParent.appendChild(oBox);
				var oPic=document.createElement("div");
				oPic.className="pic";
				oBox.appendChild(oPic);
				var oImg=document.createElement("img");
				oImg.src="img/"+dataInt.data[i].src;
				oPic.appendChild(oImg);
			}
			waterfall("main","box");
		}
	}
}

function waterfall(parent,box){
	//获得main的元素对象
	var oParent=document.getElementById(parent);
	//将main下面的所有class为box的元素取出来，组成一个元素数组
	var oBoxs=document.getElementsByClassName(box);
	//alert(oBoxs.length);
	//计算整个页面显示的列数
	  //1、获取每一个box的宽度
	  var oBoxW=oBoxs[0].offsetWidth; //2固定为201px
	  //alert(oBoxW);
	  //2、获取浏览器窗口的宽度
	  var clientWidth=document.body.clientWidth;
	  //alert(clientWidth);不同浏览器会不一样
	  //3、计算出列数
	  var clos=Math.floor(clientWidth/oBoxW);
	  oParent.style.cssText="width:"+oBoxW*clos+"px;margin:0 auto;";
	  var hArr=[];
	  for(var i=0;i<oBoxs.length;i++){
	  	if(i<clos){
	  		hArr.push(oBoxs[i].offsetHeight);
	  	}else{
	  		var minH=Math.min.apply(null,hArr);
	  		//console.log(minH);
	  		var index=getMinHIndex(hArr,minH);
	  		oBoxs[i].style.position="absolute";
	  		oBoxs[i].style.top=minH+"px";
	  		oBoxs[i].style.left=index*oBoxW+"px";
	  		hArr[index]+=oBoxs[i].offsetHeight;
	  	}
	  }
	 // console.log(hArr);
}
//返回最小值对应的数组下标i
function getMinHIndex(arr,val){
	for(var i in arr){
		if(arr[i]==val){
			return i;
		}
	}
}
//判断是否具备加载条件的函数
function checkScrollSlide(){
	var oParent=document.getElementById("main");
	var oBoxs=document.getElementsByClassName("box");
	//判断的条件为
	//第一组数据里面最后一个插入的块的height的一半的位置到页面内容顶部的长度
	//小于
	//
	var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
	var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
	var clientHeight=document.body.clientHeight || document.documentElement.clientHeight;
    return (lastBoxH<scrollTop+clientHeight)?true:false;	
}
